<script setup>
import router from "@/router.js";
import { ref } from 'vue'
import {Checked, UserFilled} from "@element-plus/icons-vue";
import RoleManagerComponent from "@/components/roleComponents/RoleManagerComponent.vue";
import AuthManagerComponent from "@/components/roleComponents/AuthManagerComponent.vue";

const goBack = () => {
  router.push('/manager/mangerindex')
}

</script>

<template>
  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 角色管理后台页面 </span>
    </template>
  </el-page-header>

  <div class="roleManagerContent">

    <el-tabs tab-position="left" style="height: 570px" class="demo-tabs">
      <el-tab-pane>
        <template #label>
        <span class="custom-tabs-label">
          <el-icon><UserFilled/></el-icon>
          <span>角色权限管理</span>
        </span>
        </template>
        <RoleManagerComponent/>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
        <span class="custom-tabs-label">
          <el-icon><Checked/></el-icon>
          <span>权限管理</span>
        </span>
        </template>
        <AuthManagerComponent/>
      </el-tab-pane>
      <el-tab-pane label="敬请期待">
        还在开发中，敬请期待......
      </el-tab-pane>
      <el-tab-pane label="敬请期待">还在开发中，敬请期待......</el-tab-pane>
    </el-tabs>

  </div>

</template>

<style scoped>
.roleManagerContent {
  margin-top: 20px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tabs__active-bar {
  height: 200px;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>